<script setup lang="ts">
import { ElDivider } from 'element-plus'

import { Icon } from '@iconify/vue';
import IconEpApple from '~icons/ep/apple';
// ~icons 是 unplugin-icons前缀约定，
// 在tsconfig.json中配置 "compilerOptions": { "types": ["unplugin-icons/types/vue"] } 后可用

const spacer = h(ElDivider, { direction: 'vertical' })
</script>

<template>
  <el-space direction="vertical" :size="0" style="margin-bottom: 16px;">
    <el-text class="title">我的图标们</el-text>
    <el-text class="super-title" type="primary">Iconify ep: Element plus</el-text>
  </el-space>
  <br />
  <el-space wrap :spacer="spacer">
    <!-- 离线图标 -->
    <el-icon color="#ff00cc"><i-ep-calendar /></el-icon>
    <el-icon><i-ep-refresh /></el-icon>
    <IconEpApple />
    <el-icon><i-ep-circle-check-filled /></el-icon>
    <el-icon><i-ep-avatar /></el-icon>
    <el-button type="primary" round><i-ep-cherry /></el-button>
    <IEpFries />
    <!-- Remix Icon 没有安装，所以下面的 i-ri-plane-fill 加载不出来 -->
    <i-ri-plane-fill />
    <!-- 虽然 Remix Icon 没有安装，但是用了 Icon 组件，所以下面的 ri:plant-fill 可以在线加载出来 -->
    <Icon icon="ri:plant-fill" />
    <Icon icon="ri:plug-fill" />
  </el-space>
  <hr />
  <el-space>
    <Icon icon="ep:apple" />
    <Icon icon="ep:eleme-filled" />
    <Icon icon="ep:goblet" />
    <!-- 在线图标，network中有请求 https://api.iconify.design/ep.json?icons={{ icon-name }} -->
    <Icon icon="ep:baseball" />
    <!-- 在线图标，network中有请求 https://api.iconify.design/mdi.json?icons={{ icon-name }} -->
    <Icon icon="mdi:home" />
    <Icon icon="mdi:account" />
  </el-space>
  <hr />
</template>

<style scoped lang="scss">
%title {
  font: {
    family: fantasy;
    size: 20px;
    weight: bold;
  }
}
.title {
  @extend %title;
}
.super-title {
  @extend %title;
  font-size: 32px;
  color: $vi-color1;
}
</style>